<template>
  <div id="User">
    <body-container>
      <section slot="features">
        <el-button @click="dialog.open()">添加人员</el-button>
      </section>
      <search-form-container @search="onSearch">
        <div slot="input" class="search-input-slot">
          <el-input size="small" clearable class="search-input-slot__cmp" v-model="keyWords"
                    placeholder="请输入手机号"/>
        </div>
        <vj-form hide-foot :form-data.sync="searchForm" inline :cfg-list="searchCfg"/>
      </search-form-container>
      <vj-table :page-obj="pageObj" @loadTable="onSearch" :loading="loading" :cfg-list="cfgList"
                :table-data="tableData">
        <template #action="row">
          <text-button text="编辑" @click="dialog.open(row)"/>
          <text-button :text="+row.status===1?'禁用':'启用'" @click="freeze(row)"/>
        </template>
      </vj-table>
    </body-container>
    <user-dialog @refresh="onSearch" ref="dialog"/>
  </div>
</template>
<script lang="ts">
import Vue, {ComponentOptions, VueConstructor} from "vue"
import Component from 'vue-class-component'
import BodyContainer from "@/components/layout/body-container.vue";
import SearchFormContainer from "@/components/layout/search-form-conatiner.vue";
import {Mixins, Ref} from "vue-property-decorator";
import {TableMixin} from "@/plugins/mixins/table";
import {requestByGet, requestByPost} from "@/utils/request";
import {formatOptions, groupBy, hookLoading, itemFromArr, updateCfgOption} from "vijay-util";
import TextButton from "@/components/basic/text-button.vue";
import {PuzzleRecordTB, UserTB} from "@/config/table";
import UserDialog from "@/components/dialog/user-dialog.vue";
import {PictureSH, UserSH} from "@/config/search";
import {warnConfirm} from "@/utils/logic";

export const title = "user";
@Component({
  components: {UserDialog, TextButton, SearchFormContainer, BodyContainer}
})
export default class User extends Mixins(TableMixin) implements ComponentOptions<Vue> {
  name = "User"
  cfgList = UserTB;
  searchCfg = UserSH;
  @Ref() dialog!: any;

  @hookLoading()
  async onSearch(pageNo?, pageSize?) {
    const params = Object.assign({pageNo, pageSize}, this.selectForm, this.searchForm);
    const res = await requestByGet(`sys/user/list`, params);
    this.tableData = res.records;
    return res;
  }

  async freeze({id, status}) {
    await warnConfirm();
    await requestByPost(`sys/user/frozenUser`, {id, status: status === 2 ? 1 : 2});
    this.$message.success("操作成功！");
    this.onSearch();
  }

  created() {
    this.onSearch();
  }
}
</script>

<style scoped lang="scss">
@import "~assets/common.scss";
@import "~assets/scss/variables.scss";

#User {
}
</style>
